import { Button, Card, Col, Form, Input, InputNumber, Modal, Row, Space, Select } from 'antd';
import Table, { ColumnsType } from 'antd/es/table';
import { TableRowSelection } from 'antd/es/table/interface';
import { useEffect } from 'react';

import { useCommon } from '@/hooks/common';

const { TextArea } = Input;

const roleMap: any = {
  2: '设计师',
  3: '分销商',
};

const roleOptions = Object.keys(roleMap).map((key) => {
  return { label: roleMap[key], value: key };
});

const statusMap: any = ['审核中', '通过', '退回'];
const statusOptions: any = statusMap.map((item: string, index: number) => {
  return { label: item, value: index };
});

export default function UpgradePage() {
  const uri = 'member-apply';
  const cateName = '升级申请记录';
  const {
    data = {},
    ModalPros,
    searchForm,
    onSearchFormReset,
    onRead,
    onSearch,
    handleChange,
  } = useCommon({ contactName: '' }, uri, {});

  const columns: ColumnsType<any> = [
    { title: '申请ID', dataIndex: 'id', align: 'center', width: 60 },
    { title: '会员ID', dataIndex: 'userId', align: 'center', width: 60 },
    {
      title: '真实姓名',
      dataIndex: 'name',
      align: 'center',
      width: 100,
    },
    {
      title: '申请成为',
      dataIndex: 'userType',
      align: 'center',
      width: 140,
      render: (userType) => <div>{roleMap[userType]}</div>,
    },
    {
      title: '申请结果',
      dataIndex: 'result',
      align: 'center',
      width: 80,
      render: (result) => <div>{statusMap[result]}</div>,
    },
    { title: '申请时间', dataIndex: 'createTime', align: 'center', width: 140 },
    {
      title: '操作',
      key: 'operation',
      align: 'center',
      width: 100,
      render: (_, record) => (
        <div className="flex w-full justify-center text-gray">
          <div className="cursor-pointer" onClick={() => onRead(record)}>
            详情
          </div>
          {/* <IconButton onClick={() => onEdit(record)}>
            <Iconify icon="solar:pen-bold-duotone" size={18} />
          </IconButton>
          <Popconfirm
            title="确认删除该数据？"
            okText="确定"
            cancelText="取消"
            placement="left"
            onConfirm={() => doDel(record.id)}
          >
            <IconButton>
              <Iconify icon="mingcute:delete-2-fill" size={18} className="text-error" />
            </IconButton>
          </Popconfirm> */}
        </div>
      ),
    },
  ];

  // rowSelection objects indicates the need for row selection
  const rowSelection: TableRowSelection<any> = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record, selected, selectedRows) => {
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      console.log(selected, selectedRows, changeRows);
    },
  };

  return (
    <Space direction="vertical" size="large" className="w-full">
      <Card>
        <Form form={searchForm} onFinish={onSearch}>
          <Row gutter={[16, 16]}>
            <Col span={8} lg={6}>
              <Form.Item<any> label="会员ID" name="userId" className="!mb-0">
                <Input />
              </Form.Item>
            </Col>
            <Col span={8} lg={6}>
              <Form.Item<any> label="申请成为" name="userType" className="!mb-0">
                <Select options={roleOptions} />
              </Form.Item>
            </Col>
            <Col span={8} lg={6}>
              <Form.Item<any> label="申请结果" name="result" className="!mb-0">
                <Select options={statusOptions} />
              </Form.Item>
            </Col>
            <Col span={24} lg={12}>
              <div className="flex justify-end">
                <Button onClick={onSearchFormReset}>重置</Button>
                <Button type="primary" htmlType="submit" className="ml-4">
                  查询
                </Button>
              </div>
            </Col>
          </Row>
        </Form>
      </Card>

      <Card
        title={cateName}
        extra={
          <div className="flex flex-row gap-[10px]">
            {/* <Button
              type="primary"
              onClick={() =>
                onCreate({ parentId: query.parentId, level: query.parentId === 0 ? 1 : 2 })
              }
            >
              新增
            </Button> */}
          </div>
        }
      >
        <Table
          rowKey="id"
          size="small"
          pagination={{ total: data.totalCount }}
          scroll={{ x: 'max-content' }}
          columns={columns}
          dataSource={data.list}
          rowSelection={{ ...rowSelection }}
          onChange={handleChange}
        />
      </Card>

      <CommonModal {...ModalPros} />
    </Space>
  );
}

function CommonModal({ title, show, formValue, type, onOk, onCancel }: any) {
  const [form] = Form.useForm();
  useEffect(() => {
    form.setFieldsValue({ ...formValue, userType: String(formValue.userType) });
  }, [formValue, form]);
  return (
    <Modal
      title={title}
      open={show}
      onOk={() => onOk({ ...formValue, ...form.getFieldsValue() }, 'audit')}
      onCancel={onCancel}
    >
      <Form
        initialValues={formValue}
        form={form}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        layout="horizontal"
      >
        <Form.Item<any> label="用户ID" name="userId" required>
          <Input disabled={type === 'read'} />
        </Form.Item>
        <Form.Item<any> label="真实姓名" name="name" required>
          <Input disabled={type === 'read'} />
        </Form.Item>
        <Form.Item<any> label="真实地址" name="address" required>
          <Input disabled={type === 'read'} />
        </Form.Item>
        <Form.Item<any> label="手机号" name="mobile" required>
          <InputNumber disabled={type === 'read'} />
        </Form.Item>
        <Form.Item<any> label="申请成为" name="userType" required>
          <Select options={roleOptions} disabled={type === 'read'} />
        </Form.Item>
        <Form.Item<any> label="自我描述" name="selfDesc" required>
          <Input disabled={type === 'read'} />
        </Form.Item>
        <Form.Item<any> label="审核结果" name="result" required>
          <Select options={statusOptions} />
        </Form.Item>
        <Form.Item<any> label="拒绝原因" name="reason">
          <TextArea />
        </Form.Item>
      </Form>
    </Modal>
  );
}
